<template>
	<div>
		<div class="topTitle">商品评价</div>
		<el-form :model="query" label-width="80px" inline>
			<el-form-item label="模糊搜索">
				<el-input v-model="query.searchWord" placeholder="请输入用户昵称 ID"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSearch">查询</el-button>
				<el-button @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<div class="row-me">
			<el-button type="primary" @click="addAppraise({})">添加虚拟评价</el-button>
			<el-button type="primary" @click="batchDel">批量删除</el-button>
			<div class="flex1"></div>
			<el-button type="primary" @click="configVisible=true">评价审核配置</el-button>
		</div>
		<el-table ref="multipleTable" :data="tableData" class="margin-top20" border
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" align="center">
			</el-table-column>
			<el-table-column label='序号' type="index" width="80" align="center"></el-table-column>
			<el-table-column prop='name' label="商品信息" align="center">
				<template slot-scope="scope">
					<div class="line1">{{scope.row.name}}</div>
				</template>
			</el-table-column>
			<el-table-column label="用户头像/昵称">
				<template slot-scope="scope">
					<div class="row-me row-center">
						<img :src="scope.row.userIcon" alt="" class="width50 height50" style="border-radius: 50%;"><span
							class="margin-left10">{{scope.row.userName}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="评分" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.star" :style="{'color':scope.row.star<4.5?'red':''}">{{scope.row.star}}</span>
				</template>
			</el-table-column>
			<el-table-column label="评价内容" align="center">
				<template slot-scope="scope">
					<div class="">
						<span v-html="scope.row.content"></span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="是否回复" align="center">
				<template slot-scope="scope">
					<span class="pointer blue-text" @click="already(scope.row)" v-if="scope.row.replay">已回复</span>
					<span v-else>未回复</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="评价时间" align="center">
			</el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="{row}">
					<span>{{row.status==0?'未审核':row.status==1?'审核通过':row.status==-1?'审核失败':''}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="220">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="clickExamine(scope.row)" v-if="scope.row.status==0">
						审核</el-button>
					<el-button type="text" size="small" @click="addAppraise(scope.row)">编辑</el-button>
					<el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
					<el-button type="text" size="small" @click="reply(scope.row)">回复</el-button>
					<el-button type="text" size="small"
						@click="topping(scope.row)">{{scope.row.recommend?'取消置顶':'置顶'}}</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
				@size-change="handleSizeChange" :current-page="query.pageNo" :total="pageTotal"
				@current-change="handlePageChange">
			</el-pagination>
		</div>

		<!-- 审核 -->
		<el-dialog title="审核" :visible.sync="toExamineVisible" width="30%">
			<el-form :model="commentObj">
				<el-form-item label="审核状态:">
					<el-radio v-model="commentObj.status" :label="1">审核通过</el-radio>
					<el-radio v-model="commentObj.status" :label="-1">审核驳回</el-radio>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="toExamineVisible = false">取 消</el-button>
				<el-button type="primary" @click="toExamineSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 添加虚拟评价 -->
		<el-dialog :title="title" :visible.sync="dialogAddAppraise" width="600px" class="pingjia">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="选择商品">
					<el-select v-model="form.productId" placeholder="请选择商品" @change="onChange">
						<el-option v-for="(item,index) in pageProductList" :key="item.id" :label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="用户头像">
					<div class="row-me row-center">
						<el-image v-if="form.userIcon" class="width100 height100 radius6 margin-right10" :src="form.userIcon"
							:preview-src-list="[form.userIcon]" fit="scale-down"></el-image>
						<el-button @click="clickImg" type="text">上传头像</el-button>
					</div>
				</el-form-item>
				<el-form-item label="用户名称">
					<el-input v-model="form.userName" placeholder="请输入用户名称"></el-input>
				</el-form-item>
				<el-form-item label="评价内容">
					<el-input type="textarea" rows="6" v-model="form.content" placeholder="请输入评价内容"></el-input>
				</el-form-item>
				<el-form-item label="商品评分">
					<el-rate v-model="form.star" allow-half :colors="colors" class="margin-top10">
					</el-rate>
				</el-form-item>
				<el-form-item label="评价时间">
					<el-date-picker v-model="form.createTime" type="datetime" placeholder="选择评价时间"
						value-format="yyyy-MM-dd HH:mm:ss">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogAddAppraise = false">取 消</el-button>
				<el-button type="primary" @click="commentVirtualSave">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 回复弹框 -->
		<el-dialog title="回复内容" :visible.sync="dialogVisibleReply" width="30%">
			<el-input type="textarea" :rows="4" placeholder="请输入回复内容" v-model="comment.content">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleReply = false">取 消</el-button>
				<el-button type="primary" @click="commentSave">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 已回复弹框 -->
		<el-dialog title="已回复评价" :visible.sync="dialogVisibleAlready" width="30%">
			<el-form :model="commentReply" label-width="100px">
				<el-form-item label="评价内容:">
					<span>{{commentReply.name}}</span>
				</el-form-item>
				<el-form-item label="评价时间:">
					<span>{{commentReply.commentDate}}</span>
				</el-form-item>
			</el-form>
			<el-table :data="commentReply.list" border>
				<el-table-column label="管理员回复" prop="content" align="center"></el-table-column>
				<el-table-column label="回复时间" prop="createTime" align="center"></el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisibleAlready = false">关闭</el-button>
			</span>
		</el-dialog>

		<!-- 评论审核配置 -->
		<el-dialog title="评论审核配置" :visible.sync="configVisible" width="40%">
			<el-radio-group v-model="commentConfig.value">
				<el-radio label="0">关闭评论</el-radio>
				<el-radio label="1">系统审核</el-radio>
				<el-radio label="2">api审核</el-radio>
				<el-radio label="3">人工审核</el-radio>
				<el-radio label="4">禁止评论</el-radio>
			</el-radio-group>
			<span slot="footer" class="dialog-footer">
				<el-button @click="configVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleConfigSave">确 定</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			imgLibrary
		},
		name: 'rate',
		data() {
			return {
				dialogAddAppraise: false,
				dialogVisibleReply: false,
				dialogVisibleAlready: false,
				dialogVisible: false,
				fileList: [],
				textarea: '',
				value2: null,
				colors: ['#99A9BF', '#F7BA2A',
					'#FF9900'
				], // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
				form: {},
				tableData: [],
				query: {
					pageNo: 1,
					pageSize: 30
				},
				pageTotal: 0,
				pageProductList: [],
				commentReply: {
					list: []
				},
				comment: {},
				title: '',
				toExamineVisible: false,
				commentObj: {},
				imageQuery: {
					pageNo: 1,
					pageSize: 32
				},
				configVisible: false,
				commentConfig: {},
				multipleSelection: []
			}
		},
		created() {
			this.getData()
			this.getPageProduct()
			this.getByKey()
		},
		methods: {
			//多选操作
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			async batchDel() {
				if (this.multipleSelection.length == 0) {
					this.$message.warning('请选择批量删除的数据！')
					return
				}
				let ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				this.$confirm('确定要删除吗？', '提示', {
					type: 'warning'
				}).then(() => {
					this.$post('/admin/mall/deletedCommentAll', ids).then(res => {
						if (res.code == 1000) {
							this.$message.success('批量删除成功')
							this.getData()
						}
					})
				}).catch(() => {});
			},
			//获取审核配置详情
			async getByKey() {
				const res = await this.$get('/admin/config/getByKey', {
					key: 'product_comment_config'
				})
				if (res.code == 1000) {
					this.commentConfig = res.data
				}
			},
			async handleConfigSave() {
				const res = await this.$post('/admin/config/update', {
					id: this.commentConfig.id,
					keyword: this.commentConfig.keyword,
					value: this.commentConfig.value,
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getByKey()
					this.configVisible = false
				}
			},
			async handleDel(id) {
				const res = await this.$post('/admin/mall/deletedCommentAll', [id])
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			async topping(row) {
				let recommend = row.recommend ? 0 : 1
				const res = await this.$postForm('/admin/mall/recommendComment', {
					id: row.id,
					recommend
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.getData()
				}
			},
			clickExamine(row) {
				this.toExamineVisible = true
				this.commentObj = JSON.parse(JSON.stringify(row))
			},
			async toExamineSave() {
				const res = await this.$postForm('/admin/mall/confirmComment', {
					id: this.commentObj.id,
					status: this.commentObj.status
				})
				if (res.code == 1000) {
					this.$message.success('操作成功')
					this.commentObj = {}
					this.getData()
					this.toExamineVisible = false
				}
			},
			async setSelected(row) {
				row.recommend = row.recommend ? 0 : 1
				const res = await this.$postForm('/admin/mall/recommendComment', {
					id: row.id,
					recommend: row.recommend
				})
				this.$message.success('操作成功')
				this.getData()
			},
			onChange(id) {
				this.pageProductList.find(item => {
					if (item.id == id) {
						this.form.name = item.name
					}
				})
			},
			async commentVirtualSave() {
				const res = await this.$post('/admin/mall/commentVirtual', this.form)
				this.$message.success('操作成功')
				this.getData()
				this.dialogAddAppraise = false
			},
			handlePictureCardPreview(res) {
				this.dialogVisible = true;
			},
			async commentSave() {
				if (this.$.isEmpty(this.comment.content)) {
					this.$message.warning('请输入回复内容!')
					return
				}
				const res = await this.$postForm('/admin/mall/comment', this.comment)
				this.$message.success('回复成功')
				this.comment = {}
				this.getData()
				this.dialogVisibleReply = false
			},
			handlePageChange(val) {
				this.$set(this.query, 'pageNo', val);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handleSearch() {
				this.query.pageNo = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNo: 1,
					pageSize: 30
				}
				this.getData();
			},
			async getPageProduct() {
				const res = await this.$get('/admin/mall/pageProduct')
				this.pageProductList = res.data.list
			},
			async getData() {
				const res = await this.$get('/admin/mall/pageProductComment', this.query)
				this.tableData = res.data.list
				this.pageTotal = res.data.totalRow
			},
			// 添加虚拟评价
			addAppraise(row) {
				if (row.id) {
					this.title = '编辑虚拟评价'
					this.form = JSON.parse(JSON.stringify(row))
					this.fileList = [{
						name: '',
						url: this.form.userIcon
					}]
				} else {
					this.title = '新增虚拟评价'
					this.form = {}
					this.fileList = []
				}
				this.dialogAddAppraise = true
			},
			handleImgOk(data) {
				this.$set(this.form, 'userIcon', data)
			},
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			// 回复
			reply(row) {
				this.dialogVisibleReply = true
				this.comment.commentId = row.id
			},
			// 已回复
			async already(row) {
				const res = await this.$postForm('/admin/mall/getCommentReply', {
					commentId: row.id
				})
				this.commentReply.list = res.data
				this.commentReply.name = row.content
				this.commentReply.commentDate = row.createTime
				this.dialogVisibleAlready = true
			},
		}
	}
</script>